<!DOCTYPE html>
<!--
   Tentative due to:
    https://github.com/whatwg/fullscreen/issues/152

-->
<title>Element#requestFullscreen() on two elements in different iframes</title>
<meta name="timeout" content="long">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../trusted-click.js"></script>
<div id="log"></div>
<iframe id="a" allowfullscreen></iframe>
<iframe id="b" allowfullscreen></iframe>
<script>
promise_test(async (test) => {
  // Request fullscreen on the body elements of both iframes, but in reverse
  // tree order.
  const a = document.getElementById('a');
  const b = document.getElementById('b');
  var rejected = false;

  // Expect two fullscreenchange events, with document.fullscreenElement
  // changing in the same order as the requests. (Events should also fire on the
  // iframes' documents, but this is not covered by this test.)
  const order = [];
  const fullscreenChangePromise = new Promise((resolve, reject) => {
    document.onfullscreenchange = test.step_func(() => {
      assert_in_array(document.fullscreenElement, [a, b]);
      order.push(document.fullscreenElement.id);
      if (order.length == 2) {
        // When the second event arrived, the fullscreen element may still be the
        // old one.
        //
        // TODO(mustaq): We need a better explanation here to cover the tree-order
        // idea of the spec.
        assert_true(order[0] == 'a' || order[0] == 'b', 'first id seen is a or b');
        assert_equals(order[1], 'a', 'second id seen is a');
      }
      resolve();
    });
  });
  const fullscreenErrorPromise = new Promise((resolve, reject) => {
    document.onfullscreenerror = test.step_func(() => {
      resolve();
    });
  });

  // Make a trusted click on frame 'b' to activate it.
  trusted_click(test, () => {
    // Now queue a trusted click on frame 'a' to make back-to-back calls.
    setTimeout(() => {
      trusted_click(test, () => {
        b.contentDocument.body.requestFullscreen();
        a.contentDocument.body.requestFullscreen().catch(test.step_func_done());
      }, a.contentDocument.body);
    }, 0);
  }, b.contentDocument.body);

  await Promise.all([
    fullscreenChangePromise,
    fullscreenErrorPromise,
  ]);
});
</script>
